<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Begin Jekyll SEO tag v2.8.0 -->
<title>0025: Creating and Using a LinkButton | gtkDcoding</title>
<meta name="generator" content="Jekyll v4.3.4" />
<meta property="og:title" content="0025: Creating and Using a LinkButton" />
<meta name="author" content="Ron Tarrant" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="How to use a GTK LinkButton, with and without a visible URL - a D language tutorial." />
<meta property="og:description" content="How to use a GTK LinkButton, with and without a visible URL - a D language tutorial." />
<link rel="canonical" href="http://localhost:4000/posts/0025-creating-and-using-a-linkbutton.html" />
<meta property="og:url" content="http://localhost:4000/posts/0025-creating-and-using-a-linkbutton.html" />
<meta property="og:site_name" content="gtkDcoding" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2019-04-09T00:00:00-04:00" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="0025: Creating and Using a LinkButton" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BlogPosting","author":{"@type":"Person","name":"Ron Tarrant"},"dateModified":"2019-04-09T00:00:00-04:00","datePublished":"2019-04-09T00:00:00-04:00","description":"How to use a GTK LinkButton, with and without a visible URL - a D language tutorial.","headline":"0025: Creating and Using a LinkButton","mainEntityOfPage":{"@type":"WebPage","@id":"http://localhost:4000/posts/0025-creating-and-using-a-linkbutton.html"},"url":"http://localhost:4000/posts/0025-creating-and-using-a-linkbutton.html"}</script>
<!-- End Jekyll SEO tag -->
<link rel="stylesheet" href="../assets/main.css">
  <link rel="stylesheet" href="../css/style.css" /><link type="application/atom+xml" rel="alternate" href="http://localhost:4000/feed.xml" title="gtkDcoding" /></head>
<body><header class="site-header" role="banner">

  <div class="wrapper"><a class="site-title" rel="author" href="../">gtkDcoding</a><nav class="site-nav">
        <input type="checkbox" id="nav-trigger" class="nav-trigger" />
        <label for="nav-trigger">
          <span class="menu-icon">
            <svg viewBox="0 0 18 15" width="18px" height="15px">
              <path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
            </svg>
          </span>
        </label>

        <div class="trigger"><a class="page-link" href="../about.html">About</a><a class="page-link" href="../index-reverse.html">Posts in Date Order</a><a class="page-link" href="../topics.html">Blog Posts by Topic</a></div>
      </nav></div>
</header>
<main class="page-content" aria-label="Content">
      <div class="wrapper">
        <article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
	<header class="post-header">
		<link rel="stylesheet" href="../css/font_size.css" />
		<link rel="stylesheet" href="../css/figure.css" />
		<link rel="stylesheet" href="../css/topics/button.css" />  <!-- sub in the tag/topic -->
		<link rel="stylesheet" href="../css/modal.css" />
		<link rel="stylesheet" href="../css/post.css" />
		<link rel="stylesheet" href="../css/mascot_effects.css" />

		
		
		<p class="post-meta">
		<time class="dt-published" datetime="2019-04-09T00:00:00-04:00" itemprop="datePublished">Tuesday, April 9, 2019
		</time>• by <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="p-author h-card" itemprop="name">Ron Tarrant</span></span></p>
	</header>

	<div class="post-content e-content" itemprop="articleBody">
		<div class="skew-line"></div>
		<h1 id="0025-creating-and-using-a-linkbutton">0025: Creating and Using a LinkButton</h1>

<p>Today’s buttons are simple, a button to click to follow a link and another one with a pretty face and a link. So, what’s the difference?</p>

<h2 id="a-linkbutton">A LinkButton</h2>

<div class="screenshot-frame">
	<div class="frame-header">
		Results of this example:
	</div>
	<div class="frame-screenshot">
		<figure>
			<img id="img0" src="../images/screenshots/002_button/button_10.png" alt="Current example output" />		<!-- img# -->
			
			<!-- Modal for screenshot -->
			<div id="modal0" class="modal">																	<!-- modal# -->
				<span class="close0">&times;</span>															<!-- close# -->
				<img class="modal-content" id="img00" />															<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal0");														// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img0");															// img#
			var modalImg = document.getElementById("img00");													// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close0")[0];											// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>
			<figcaption>
			Current example output
			</figcaption>
		</figure>
	</div>

	<div class="frame-terminal">
		<figure class="right">
			<img id="img1" src="../images/screenshots/002_button/button_10_term.png" alt="Current example terminal output" />		<!-- img#, filename -->

			<!-- Modal for terminal shot -->
			<div id="modal1" class="modal">																				<!-- modal# -->
				<span class="close1">&times;</span>																		<!-- close# -->
				<img class="modal-content" id="img11" />																		<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal1");																	// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img1");																		// img#
			var modalImg = document.getElementById("img11");																// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close1")[0];														// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>

			<figcaption>
				Current example terminal output (click for enlarged view)
			</figcaption>
		</figure>
	</div>

	<div class="frame-footer">																								<!-- ------------- filename (below) --------- -->
		The code file for this example is available <a href="https://github.com/rontarrant/gtkd_demos/blob/master/002_button/button_10_linkbutton.d" target="_blank">here</a>.
	</div>
</div>

<p>At its simplest, a <code class="language-plaintext highlighter-rouge">LinkButton</code> has a link that takes the user to a website. And on its face, the <code class="language-plaintext highlighter-rouge">LinkButton</code> shows the URL for that site.</p>

<p>And because this example is so simple, I’ve dumped it all into the <code class="language-plaintext highlighter-rouge">TestRigWindow</code> object:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">class</span> <span class="n">TestRigWindow</span> <span class="p">:</span> <span class="n">MainWindow</span>
<span class="p">{</span>
	<span class="nb">string</span> <span class="n">title</span> <span class="p">=</span> <span class="s">"LinkButton without Text"</span><span class="p">;</span>
	<span class="nb">string</span> <span class="n">link</span> <span class="p">=</span> <span class="s">"http:/.com"</span><span class="p">;</span>
	<span class="nb">string</span> <span class="n">message</span> <span class="p">=</span> <span class="s">"The text entry box holds: "</span><span class="p">;</span>
	<span class="n">LinkButton</span> <span class="n">linkButton</span><span class="p">;</span>
	
	<span class="k">this</span><span class="p">()</span>
	<span class="p">{</span>
		<span class="k">super</span><span class="p">(</span><span class="n">title</span><span class="p">);</span>
		<span class="n">addOnDestroy</span><span class="p">(&amp;</span><span class="n">endProgram</span><span class="p">);</span>
		
		<span class="n">linkButton</span> <span class="p">=</span> <span class="k">new</span> <span class="n">LinkButton</span><span class="p">(</span><span class="n">link</span><span class="p">);</span>
		<span class="n">add</span><span class="p">(</span><span class="n">linkButton</span><span class="p">);</span>
		
		<span class="n">showAll</span><span class="p">();</span>
		
	<span class="p">}</span> <span class="c1">// this()</span>
	
	
	<span class="kt">void</span> <span class="n">endProgram</span><span class="p">(</span><span class="n">Widget</span> <span class="n">w</span><span class="p">)</span>
	<span class="p">{</span>
		<span class="n">writeln</span><span class="p">(</span><span class="n">message</span><span class="p">,</span> <span class="n">linkButton</span><span class="p">.</span><span class="n">getUri</span><span class="p">());</span>
		
	<span class="p">}</span> <span class="c1">// endProgram()</span>
	
<span class="p">}</span> <span class="c1">// class TestRigWindow</span>
</code></pre></div></div>

<p>Nothing to it, really, define the link, instantiate the <code class="language-plaintext highlighter-rouge">LinkButton</code> object, add it, and the rest is taken care of for you. You won’t have to figure out anything else because it hooks into the OS to grab the default browser and passes it the URL.</p>

<p>But what if you don’t want the URL to show on the button? Perhaps your URL is something long and ugly or you want to take the user to a specific page that would end up looking like:</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>http:/.com/posts/0000-introduction-to-gtkDcoding.html
</code></pre></div></div>

<p>That ain’t gonna look so pretty on a button, so you might instead consider…</p>

<h2 id="a-linkbutton-with-a-pretty-face">A LinkButton with a Pretty Face</h2>

<div class="screenshot-frame">
	<div class="frame-header">
		Results of this example:
	</div>
	<div class="frame-screenshot">
		<figure>
			<img id="img2" src="../images/screenshots/002_button/button_11.png" alt="Current example output" />		<!-- img# -->
			
			<!-- Modal for screenshot -->
			<div id="modal2" class="modal">																<!-- modal# -->
				<span class="close2">&times;</span>														<!-- close# -->
				<img class="modal-content" id="img22" />														<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal2");													// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img2");														// img#
			var modalImg = document.getElementById("img22");												// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close2")[0];										// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>
			<figcaption>
			Current example output
			</figcaption>
		</figure>
	</div>

	<div class="frame-terminal">
		<figure class="right">
			<img id="img3" src="../images/screenshots/002_button/button_11_term.png" alt="Current example terminal output" /> 		<!-- img#, filename -->

			<!-- Modal for terminal shot -->
			<div id="modal3" class="modal">																			<!-- modal# -->
				<span class="close3">&times;</span>																	<!-- close# -->
				<img class="modal-content" id="img33" />																	<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal3");																// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img3");																	// img#
			var modalImg = document.getElementById("img33");															// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close3")[0];													// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>

			<figcaption>
				Current example terminal output (click for enlarged view)
			</figcaption>
		</figure>
	</div>

	<div class="frame-footer">																							<!--------- filename (below) ------------>
		The code file for this example is available <a href="https://github.com/rontarrant/gtkd_demos/blob/master/002_button/button_11_linkbutton_labeled.d" target="_blank">here</a>.
	</div>
</div>

<p>Not a lot changes:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">class</span> <span class="n">TestRigWindow</span> <span class="p">:</span> <span class="n">MainWindow</span>
<span class="p">{</span>
	<span class="nb">string</span> <span class="n">title</span> <span class="p">=</span> <span class="s">"LinkButton with Text"</span><span class="p">;</span>
	<span class="nb">string</span> <span class="n">link</span> <span class="p">=</span> <span class="s">"http:/.com/posts/0000-introduction-to-gtkDcoding.html"</span><span class="p">;</span>
	<span class="nb">string</span> <span class="n">linkText</span> <span class="p">=</span> <span class="s">"GTK D-coding"</span><span class="p">;</span>
	<span class="nb">string</span> <span class="n">message</span> <span class="p">=</span> <span class="s">"The text entry box holds: "</span><span class="p">;</span>
	<span class="n">LinkButton</span> <span class="n">linkButton</span><span class="p">;</span>
	
	<span class="k">this</span><span class="p">()</span>
	<span class="p">{</span>
		<span class="k">super</span><span class="p">(</span><span class="n">title</span><span class="p">);</span>
		<span class="n">addOnDestroy</span><span class="p">(&amp;</span><span class="n">endProgram</span><span class="p">);</span>
		
		<span class="n">linkButton</span> <span class="p">=</span> <span class="k">new</span> <span class="n">LinkButton</span><span class="p">(</span><span class="n">link</span><span class="p">,</span> <span class="n">linkText</span><span class="p">);</span>
		<span class="n">add</span><span class="p">(</span><span class="n">linkButton</span><span class="p">);</span>
		
		<span class="n">showAll</span><span class="p">();</span>

	<span class="p">}</span> <span class="c1">// this()</span>
	
	
	<span class="kt">void</span> <span class="n">endProgram</span><span class="p">(</span><span class="n">Widget</span> <span class="n">w</span><span class="p">)</span>
	<span class="p">{</span>
		<span class="n">writeln</span><span class="p">(</span><span class="n">message</span><span class="p">,</span> <span class="n">linkButton</span><span class="p">.</span><span class="n">getUri</span><span class="p">());</span>
		
	<span class="p">}</span> <span class="c1">// endProgram()</span>
	
<span class="p">}</span> <span class="c1">// class TestRigWindow</span>
</code></pre></div></div>

<p>It’s all in the arguments sent to <code class="language-plaintext highlighter-rouge">LinkButton</code>’s constructor:</p>

<ul>
  <li>Send it one argument, a URL, and it’s happy to slap that onto the face of the button.</li>
  <li>Send it two arguments, a URL and a nicely-formatted string, and that button ends up all cute and cuddly.</li>
</ul>

<p>On the downside, the <code class="language-plaintext highlighter-rouge">LinkButton</code> spits out a warning to the <em>Command Prompt</em> window every time you use it. My research has turned up no reasonable explanation and it’s been going on since the release of <em>GTK 3.0</em>. The good news is that the message is of no consequence and it seems safe to ignore.</p>

<p>And that’s it for this time, a short post for a short day. Come on back sometime and we’ll do this again.</p>

<div class="blog-nav">
	<div style="float: left;">
		<a href="./0024-switch-and-light-switch.html">Previous: Switch</a>
	</div>
	<div style="float: right;">
		<a href="./0026-menu-basics.html">Next: Menu Basics</a>
	</div>
</div>
<p>
	<h3></h3>
<div class="inpage-frame">
	<a href="https://github.com/sponsors/rontarrant">
		<BR>
		<BR>
		<B>Is this article useful? Educational? Entertaining, perhaps?</B>
		<BR>
		<figure class="left">
			<img src="../images/favorite_32.png" alt="Sponsorship heart" style="width: 32px; height: 32px;">
		</figure>
		You're free to accept or decline this invitation to become our newest sponsor.
	</a>
</div>
	<h4 class="comment-blurb"><B>Comments? Questions? Observations?</B></h4>
	<p>
		Did we miss a tidbit of information that would make this post even more informative? Let's talk about it in the comments.
	</p>
	<script src="https://utteranc.es/client.js"
		repo="rontarrant"
		issue-term="pathname"
		theme="github-light"
		crossorigin="anonymous"
		async>
	</script>
	<ul>
		<li> come on over to the <a href="https://forum.dlang.org/">D Language Forum</a> and look for one of the <i>gtkDcoding</i> announcement posts, </li>
		<li> drop by <a href="https://forum.gtkd.org/">the <i>GtkD Forum</i></a>,</li>
		<li> follow the link below to email me, or</li>
		<li> go to the	<a href="https://www.facebook.com">gtkDcoding Facebook page.</a></li>
	</ul>
</p>
<p> You can also subscribe <a href="/feed.xml">via RSS</a> so you won't miss anything. Thank you very much for dropping by.</p>
<p>&copy; Copyright 2025 Ron Tarrant </p>
</div>

	<a class="u-url" href="./0025-creating-and-using-a-linkbutton.html" hidden></a>
</article>

      </div>
    </main><footer class="site-footer h-card">
  <data class="u-url" href="/"></data>

  <div class="wrapper">

    <h2 class="footer-heading">gtkDcoding</h2>

    <div class="footer-col-wrapper">
      <div class="footer-col footer-col-1">
        <ul class="contact-list">
          <li class="p-name">Ron Tarrant</li><li><a class="u-email" href="mailto:gtkDcoding@gmail.com">gtkDcoding@gmail.com</a></li></ul>
      </div>

      <div class="footer-col footer-col-2"><ul class="social-media-list"><li><a href="https://github.com/rontarrant"><svg class="svg-icon"><use xlink:href="../assets/minima-social-icons.svg#github"></use></svg> <span class="username">rontarrant</span></a></li></ul>
</div>

      <div class="footer-col footer-col-3">
        <p>Simple examples of how to use GtkD to build GUI applications.</p>
      </div>
    </div>

  </div>

</footer>
</body>

</html>
